<template>
    <div  class="system-log">
        <el-card class="box-card mt-15">
            <div class="home-form">
                <el-form ref="ruleForm" label-width="70px" @submit.native.prevent>
                    <el-row :gutter="10">
                        <el-col :span="8">
                            <el-form-item label="提交时间" prop="date">
                                <el-date-picker
                                    size="mini"
                                    v-model="date"
                                    type="daterange"
                                    value-format="yyyy-MM-dd"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :picker-options="pickerOptions">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="5">
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch" class="search-btn">搜索</el-button>
                            <el-button type="danger" size="mini" @click="handleReset" class="search-btn">重置</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </el-card>
        <el-card class="box-card">
            <!-- 头部 -->
            <div slot="header" class="clearfix fix-lh">
                <span>系统日志</span>
            </div>
            <div class="home-body">
                <cvue-table :option="tableOption" :data="tableData" ref="tbl1"
                    :isShowAdd="false" :page="page"
                    :tablePage="tablePage" :pageSize="page.pageSize"
                    :loading="tableLoading"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :isShowPage="pageShow">
                    <template slot-scope="scope" slot="msg">
                        <span>{{scope.row.msg == null ? '-' : scope.row.msg}}</span>
                    </template>
                </cvue-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import cvueTable from '@/components/cvue-table'
import cvueDialog from '@/components/cvue-dialog'
import { touchRefresh } from '@/mixins/mixinKeep'

export default {
    name: 'systemLog',
    mixins: [touchRefresh],
    components: {
        cvueTable,
        cvueDialog
    },
    data () {
        return {
            // keyword: '',
            createTimeBegin: '',
            createTimeEnd: '',
            date: '',
            tableLoading: false,
            tablePage: 1,
            pageShow: true,
            page: {
                total: 1, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 10, // 每页显示多少条
                pageSizes: [10, 50, 100]
            },
            tableOption: {
                stripe: true,
                width: '100%',
                border: true,
                index: false,
                cloumn: [
                    {prop: 'index', label: '序号', align: 'center', width: 80},
                    {prop: 'createTime', label: '时间', align: 'center'},
                    {prop: 'msg', label: '系统异常日志', align: 'center', slotStatus: true, minWidth: 300}
                ]
            },
            tableData: [
                // {
                //     createTime: '2019-05-29  13:25:18', msg: '我今天登陆了'
                // }
            ],
            pickerOptions: {
              disabledDate (time) {
                return time > new Date().getTime()
              }
            }

        }
    },
    mounted () {
        this.handleList() // 获取系统日志列表
    },
    methods: {
        // 关键字搜索
        handleSearch () {
            this.tablePage = 1
            this.handleList()
        },
        handleReset () {
            this.date = []
            this.tablePage = 1
            this.handleList()
        },
        // 改变页码
        handleCurrentChange (val) {
            this.tablePage = val
            this.handleList()
        },
        // 改变pagesize
        handleSizeChange (val) {
            this.tablePage = 1
            this.page.pageSize = val
            this.handleList()
        },
        handleList () {
            if (this.date == '' || this.date == null) {
                this.createTimeBegin = ''
                this.createTimeEnd = ''
            } else {
                this.createTimeBegin = this.date[0] + ' ' + '00:00:00'
                this.createTimeEnd = this.date[1] + ' ' + '23:59:59'
            }
            var params = {
                pageIndex: this.tablePage,
                pageSize: this.page.pageSize,
                createTimeBegin: this.createTimeBegin,
                createTimeEnd: this.createTimeEnd
            }
            // console.log(params)
            this.$store.dispatch('log/GetSystemLog', params).then(res => {
                // console.log(res)
                // console.log(res.data.list)
                var data = res.data
                if (res.code == 200) {
                    this.tableData = data.list
                    if (this.tableData == '') {
                        this.pageShow = false
                    } else {
                        this.pageShow = true
                    }
                } else {
                    this.$message({
                        message: res.msg,
                        duration: 2000,
                        type: 'error'
                    })
                }
                this.page.total = data.total
                this.page.currentPage = this.tablePage
            }).catch(err => {
                console.log(err)
                this.tableLoading = false
            })
        }
    }
}
</script>

<style lang="scss">
    .system-log{
        padding: 0px!important;
        height: auto!important;
        .mt-15{
            margin-bottom: 10px;
        }
        .home-body{
            margin-top: -15px;
        }
        .btn-list{
            float: right;
        }
        .el-card__header{
            border-bottom: none;
        }
        .fix-lh{
            line-height: 32px;
        }
        .text-right{
            text-align: right;
        }
        // .home-form{
        //     margin-bottom: 7px;
        //     margin-top: -17px;
        // }
        .el-card__header,.el-card__body{
            padding: 15px;
        }
        .el-date-editor{
            width:100%!important;
        }
        .el-input.is-disabled .el-input__inner{
            color: #606266;
        }
        // .el-table__body{
        //     tr td:nth-child(2) span{
        //         color: #409EFF;
        //         cursor: pointer;
        //     }
        // }
        .table-body{
            margin-top: 20px;
        }
        .fault-wrap{
            margin-top: 20px;
        }
        .fault-body{
            width: 100%;
            height: 100%;
            min-height: 300px;
            background: #000000;
            color: #fff;
            font-size: 16px;
            border-radius: 4px;
            padding: 10px;
            box-sizing: border-box;
        }
    }

</style>
